﻿@using VocaDb.Model.Domain
@using VocaDb.Model.Domain.Users
@using Res = ViewRes.User.DetailsStrings

<!-- UserDetailsViewModel -->

<div class="well well-transparent">
	
	<ul class="nav nav-pills">
		<li data-bind="css: { active: eventsType() == '@UserEventRelationshipType.Attending' }">
			<a href="#" data-bind="click: function() { eventsType('@UserEventRelationshipType.Attending'); }">@Res.Attending</a>
		</li>
		<li data-bind="css: { active: eventsType() == '@UserEventRelationshipType.Interested' }">
			<a href="#" data-bind="click: function() { eventsType('@UserEventRelationshipType.Interested'); }">@Res.Interested</a>
		</li>
	</ul>	
	
	<table class="table" data-bind="foreach: events">
		<tr>
			<td width="85px">
				<a visible="{{$data.mainPicture && $data.mainPicture.urlTinyThumb}}" title="{{$data.additionalNames}}" href="{{vdb.utils.EntryUrlMapper.details('@EntryType.ReleaseEvent', id, urlSlug)}}">
					<img alt="Picture" attr.src="{{$data.mainPicture && $data.mainPicture.urlTinyThumb ? $data.mainPicture.urlTinyThumb : null}}" />
				</a>				
			</td>
			<td>
				<a href="{{vdb.utils.EntryUrlMapper.details('@EntryType.ReleaseEvent', id, urlSlug)}}" title="{{$data.additionalNames}}">{{name}}</a>
				<span visible="{{$data.date}}">
					<br />
					<small>{{$data.date | formatDate: 'l'}}</small>					
				</span>
			</td>
		</tr>
	</table>

</div>
